﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/themes/demo.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <style type="text/css">
            div label.error 
            { 
            color:Red; 
            font-size:13px; 
            margin-left:5px; 
            padding-left:16px; 
            /*background:url("error.png") left no-repeat;*/ 
            } 
    </style>
</head>
<body style="">
    <div style="text-align:center;width:50%;margin-left:25%;height:50%">
        <table id="dg" title="用户信息列表" style="position:absolute;width:100%;height:380px"
               data-options="
           rownumbers:true,
           singleSelect:false,
           pagination:true,
           pageSize:10,
           pageNumber:1,
           pageList:[5,10,15],
           method:'post',
           collapsible: false,
           fit: false,
           fitColumns:true,
           idField:'userId',
           url: '/UserAccount/GetUserAccountList'">
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <th data-options="field:'userId',width:100">编号</th>
                    <th data-options="field:'userName',width:100">用户名</th>
                    <th data-options="field:'userPwd',width:80,align:'right'">密码</th>
                    <th data-options="field:'userEmail',width:80,align:'right'">电子邮箱</th>
                    <th data-options="field:'userPhone',width:240">手机</th>
                    <th data-options="field:'qq',width:60,align:'center'">QQ号</th>
                </tr>
            </thead>
        </table>
    </div>
    <!--添加数据-->
    <div id="addDiv" class="" title="添加用户数据" style="width:30%;padding:10px;display:none">
        @using (Ajax.BeginForm("AddUserAccount", "UserAccount", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
        {
            <table>
                <tr><td>用户名</td><td><input type="text" name="userName" /></td></tr>
                <tr><td>密码</td><td><input type="password" name="password" /></td></tr>
                <tr><td>手机</td><td><input type="text" name="shouji" /></td></tr>
                <tr><td>电子邮箱</td><td><input type="text" name="email" /></td></tr>
            </table>
        }
    </div>
    <!--修改数据-->
    <div id="editDiv" class="" title="修改用户数据" style="width:30%;padding:10px;display:none">
                @using (Ajax.BeginForm("EditUserAccount", "UserAccount", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
                {
                <input type="hidden" id="txtPwd" name="password"/>
                <input type="hidden" id="txtId" name="id" />
            <table>
                <tr><td>用户名</td><td><input type="text" name="userName" id="txtName" /></td></tr>
                <tr><td>QQ号</td><td><input type="text" name="qq" id="txtQQ" /></td></tr>
                <tr><td>手机</td><td><input type="text" name="shouji" id="txtPhone" /></td></tr>
                <tr><td>电子邮箱</td><td><input type="text" name="email" id="txtEmail" /></td></tr>
            </table>
                }
    </div>

    <script type="text/javascript">
        $(function () {
            var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
            pager.pagination({
                buttons: [{
                    iconCls: 'icon-search',
                    handler: function () {
                        alert('search');
                    }
                }, {
                    iconCls: 'icon-add',
                    handler: function () {
                        AddRec();
                    }
                }, {
                    iconCls: 'icon-edit',
                    handler: function () {
                        showEdit();
                    }
                }, {
                    iconCls: 'icon-remove',
                    handler: function () {
                        RemoveRec();
                    }
                }]
            });
        })

        function RemoveRec() {
            var rows = $('#dg').datagrid('getSelections');
            if (!rows||rows.length==0) {
                $.messager.alert("提醒", "请选择要删除的记录！", "error");
                return;
            }
            $.messager.confirm("提示", "确定要删除所选数据？", function (r) {
                if (r) {
                    var rowsLength = rows.length;
                    var strId = "";
                    for (var i = 0; i < rows.length; i++) {
                        strId = strId + rows[i].userId + ",";
                    }
                    strId = strId.substr(0,strId.length-1);
                    $.post("/UserAccount/DeleteRec", { "strId": strId }, function (data) {
                        if (data=="ok") {
                            $("#dg").datagrid('reload');//加载表格数据，不会跳转到第一页
                            //清除上次操作历史记录clearSelections，避免后端重复操作！！
                            $("#dg").datagrid('clearSelections');
                        }
                        else {
                            $.messager.alert("提醒","删除记录失败");
                        }
                    });
                }
            });
        }

        function AddRec() {
            $('#addDiv').dialog({
                resizable: false,
                collapsible:true,
                modal: true,
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-save',
                    handler: function () {
                        //表单输入验证
                        ValidateInfo();
                        $("#addForm").submit();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        alert('cancel');;
                    }
                }]
            });
        }

        function afterAdd(data) {
            if (data == "ok") {
                $('#addDiv input').val("");
                $('#addDiv').dialog('close');
                $("#dg").datagrid('reload');//加载表格数据，不会跳转到第一页
            }
        }

        function ValidateInfo() {
            $("#editForm").validate({
                rules: {
                    userName: "required",
                    qq: {
                        required: true
                    },
                    shouji: {
                        required: true,
                        rangelength: [11, 11]
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    userName: "请输入用户名",
                    qq: {
                        required: "请输入密码"
                    },
                    shouji: {
                        required: "请输入手机号",
                        rangelength: "手机号码必须为11位"
                    },
                    email: {
                        required: "请输入邮箱号",
                        email: "邮箱输入格式有误"
                    }
                }
            });
            $("#addForm").validate({
                rules: {
                    userName: "required",
                    password:{
                        required: true,
                        minlength:6
                        },
                    shouji:{
                        required: true,
                        rangelength: [11, 11]
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    userName: "请输入用户名",
                    password: {
                        required: "请输入密码",
                        minlength:"密码至少为6位数"
                    },
                    shouji: {
                        required: "请输入手机号",
                        rangelength: "手机号码必须为11位"
                    },
                    email: {
                        required: "请输入邮箱号",
                        email: "邮箱输入格式有误"
                    }
                }
            });
        }

        //展示要修改的数据
        function showEdit() {
            //判断用户是否选择要修改的数据
            var rows = $("#dg").datagrid('getSelections');
            if (rows.length!=1) {
                $.messager.alert("提示", "请选择一条您要修改的数据", "error");
                return;
            }
            var id = rows[0].userId;
            $.post("/UserAccount/ShowEditInfo", { "id": id }, function (data) {
                $("#txtName").val(data.userName);
                $("#txtQQ").val(data.qq);
                $("#txtPhone").val(data.shouji);
                $("#txtEmail").val(data.email);
                $("#txtPwd").val(data.password);
                $("#txtId").val(data.id);
            });

            $('#editDiv').dialog({
                title:"编辑用户数据",
                resizable: false,
                collapsible: true,
                modal: true,
                buttons: [{
                    text: '修改',
                    iconCls: 'icon-save',
                    handler: function () {
                        //表单输入验证
                        ValidateInfo();
                        $("#editForm").submit();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        alert('cancel');
                    }
                }]
            });
        }

        function afterEdit(data) {
            if (data == "ok") {
                $('#editDiv input').val("");
                $('#editDiv').dialog('close');
                $("#dg").datagrid('reload');//加载表格数据，不会跳转到第一页
                $.messager.alert("提示", "修改用户数据成功");
            }
            else
            {
                $.messager.alert("提示","修改用户数据失败");
            }
        }

        //Json日期格式的转换
        function ChangeDateFr(cellVal) {
            var date = new Date(parseInt(cellVal.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate()<10?"0"+date.getDate():date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    </script>

</body>
</html>
